<template>
  <footer class="footer">
    <span class="todo-count">
      <strong></strong> {{ store.unCompleted }} item left
    </span>
    <ul class="filters">
      <li>
        <a
          href=""
          @click.prevent="store.changeVisibility('all')"
          :class="{ selected: visibility == 'all' }"
          >All</a
        >
      </li>
      <li>
        <a
          href=""
          @click.prevent="store.changeVisibility('active')"
          :class="{ selected: visibility == 'active' }"
          >Active</a
        >
      </li>
      <li>
        <!-- :class="{ selected: visibility == 'Completed'} -->
        <a
          href=""
          @click.prevent="store.changeVisibility('completed')"
          :class="{ selected: visibility == 'completed' }"
          >Completed</a
        >
      </li>
    </ul>
    <button
      class="clear-completed"
      v-show="store.unCompleted < store.todoList.length"
      @click="store.clearCompleted"
    >
      Clear completed
    </button>
  </footer>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
import useTodoStore from "../stores/useTodoStore";
let store = useTodoStore();
defineProps({
  visibility: {
    type: String,
    default: "all",
  },
});
</script>